<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="feeder.title">上料机</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
body{
	margin: 0;
	padding: 0;
}
p{
	margin: 0;
}
.u-line{
	margin: 0 auto;
	width: 770px;
    height: 600px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 200px;
	width: 770px;
	float: left;
	margin-top: 110px;
	-webkit-transform: rotateY(180deg);
}
.u-road p{
	-webkit-transform: rotateY(180deg);
}
.u-road span{
	display: inline-block;
	-webkit-transform: rotateY(180deg);
}
.u-roadcon{
	position: relative;
	float: left;
}
.u-roadcon:after{
	content: '';
	display: block;
	clear: both;
}
.u-road:after{
	content: '';
	display: block;
	clear: both;
}
.u-road-opposite:after{
	content: '';
	display: block;
	clear: both;
}
.u-track{
	position: absolute;
	height: 28px;
	width: 100%;
	left: 0;
	top: 85px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.u-outtrack{
	position: absolute;
	height: 52px;
	width: 28px;
	left: 550px;
	top: 33px;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
}

.u-btns{
	margin: 20px 0 0 60%;
}
.u-fade{
	position: absolute;
	left: 530px;
	top: 65px;
	width: 68px;
	height: 68px;
	background: #ddd9c3;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 14;
	text-align: center;
	line-height: 68px;
}
.u-input{
	position: absolute;
	left: 650px;
	top: 65px;
	width: 68px;
	height: 68px;
	background: #b9b9b9;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 15;
	text-align: center;
	line-height: 68px;
}
.u-output{
	position: absolute;
	left: 530px;
	top: -35px;
	width: 68px;
	height: 68px;
	background: #eef2f7;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 2;
	text-align: center;
	line-height: 68px;
}
.u-cache{
	position: absolute;
	left: 290px;
	top: -35px;
	width: 68px;
	height: 68px;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
}
.u-cache p{
	margin: 0;
	text-align: center;
	font-size: 10px;
	margin-top: 4px;
}
.u-hand{
	position: absolute;
	width: 24px;
	height: 24px;
	top: -10px;
	left: -10px;
	border-radius: 50%; 
	background: #9acfe1;
	border: 1px solid #eee;
	z-index: -1;
}
.u-hand:after{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	margin-top: 6px;
	border-radius: 6px; 
	background: #66bfdd;
}
.u-handbar{
	position: relative;
	float: left;
	width: 6px;
	height: 6px;
	margin-top: 31px;
	margin-left: 31px;
	border-radius: 4px; 
	background: #66bfdd;
	opacity: 0;
}
.stop {
    animation-play-state: paused;
}
.opposite{
	margin-top: 0;
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.opposite p{
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.opposite span{
	display: inline-block;
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.u-handbar2{
	position: absolute;
	margin: 0;
	left: 561px;
	top: 96px;
	z-index: 15;
}
.feednum{
	position: absolute;
	width: 80%;
	height: 10%;
	left: 10%;
	background: #fff;
}
.feednum1{
	top: 9%;
}
.feednum2{
	top: 27%;
}
.feednum3{
	top: 45%;
}
.feednum4{
	top: 63%;
}
.feednum5{
	top: 81%;
}
.moveupt{
	-webkit-animation: moveupt 0.3s ease infinite;
}
@-webkit-keyframes moveupt {
0%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
100%{
	-webkit-transform: translateY(-100px);
	opacity: 1;
}
}
.moveright{
	-webkit-animation: moveright 0.3s ease infinite;
	-webkit-animation-delay: 0.3s;
}
@-webkit-keyframes moveright {
0%{
	-webkit-transform: translateX(0);
	opacity: 1;
}
100%{
	-webkit-transform: translateX(120px);
	opacity: 1;
}
}
#u-boxe{
	position: absolute;
	opacity: 0;
}
.u-boxcon .u-box.printed{
	background: #ddd9c3;
}
.u-cube{
	margin-left: 0;
	margin-right: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="feeder.title">上料机</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-infos">
	<h2 data-localize="feeder.info_title">状态区域</h2>
	<div class="u-errorlist">
		<h3 data-localize="yichang">异常一览：</h3>
		<div class="u-errorlistcon">
		</div>
	</div>
	<p class="status"><span class="u-cube t-status"></span><span data-localize="feeder.running">运行状态</span></p>
	<br>
	<p class="status"><span class="u-cube p5"></span><span data-localize="feeder.info_status1">本机有片</span></p>
	<br>
	<p class="status"><span class="u-cube p6"></span><span data-localize="feeder.info_status2">下位机要片</span></p>
	<br>
	<p class="status"><span class="u-cube p7"></span><span data-localize="feeder.info_status3">缓存原点</span></p>
	<br>
	<p class="status"><span class="u-cube p8"></span><span data-localize="feeder.info_status4">料盒原点</span></p>
	<br>
	<p class="status"><span class="u-cube p9"></span><span data-localize="feeder.info_status5">舌头缩回</span></p>
	<br>
	<p class="status"><span class="u-cube p10"></span><span data-localize="feeder.info_status6">压料盒原点</span></p>
	<br>
</div>
<div class="u-cachecon">
<div class="u-cachelist">
</div>
</div>
<div class="t-con">
<div class="u-line">
	<div class="u-boxcon needleft stop u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
	<div class="u-road lineA">
		<div class="u-track"></div>
		<div class="u-cache">
			<div class="circle">
			<div class="pie_left"><div class="circle_left"></div></div>
			<div class="pie_right"><div class="circle_right"></div></div>
			<div class="mask"><span class="cachenum">0</span></div>
			</div>
		</div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box5"><p></p></div></div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box4"><p></p></div>
		</div>
		<div class="u-boxcon needleft stop">
			<div class="u-box u-box3" id="u-box3"><p></p></div>
			<div class="u-handbar u-handbar1" id="u-handbar1"><div class="u-hand"></div></div>
		</div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box2"><p></p></div></div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box1"></div></div>
		<div class="u-handbar u-handbar2" id="u-handbar2"><div class="u-hand"></div></div>
		<div class="u-boxcon leftonce stop"><div class="u-box prewprinted"><div class="feednum feednum1"></div>
			<div class="feednum feednum2"></div>
			<div class="feednum feednum3"></div>
			<div class="feednum feednum4"></div>
			<div class="feednum feednum5"></div></div></div>
		<div class="u-fade" id="u-fade">
		<p class="u-spenum"></p>
			<div class="feednum feednum1"></div>
			<div class="feednum feednum2"></div>
			<div class="feednum feednum3"></div>
			<div class="feednum feednum4"></div>
			<div class="feednum feednum5"></div>
		</div>
		<div class="u-input"><p data-localize="feeder.input_si">进料</p></div>
		<div class="u-outtrack"></div>
		<div class="u-output u-outbox" id="u-outbox"></div>
		<div class="u-output"><p data-localize="feeder.output_si">出料</p></div>

	</div>
	<div class="u-road opposite lineB">
		<div class="u-track"></div>
		<div class="u-cache">
			<div class="circle">
			<div class="pie_left"><div class="circle_left"></div></div>
			<div class="pie_right"><div class="circle_right"></div></div>
			<div class="mask"><span class="cachenum">0</span></div>
			</div>
		</div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box5"><p></p></div></div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box4"><p></p></div>
		</div>
		<div class="u-boxcon needleft stop">
			<div class="u-box u-box3" id="u-box3-b"><p></p></div>
			<div class="u-handbar u-handbar1" id="u-handbar1-b"><div class="u-hand"></div></div>
		</div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box2"><p></p></div></div>
		<div class="u-boxcon needleft stop"><div class="u-box u-box1"></div></div>
		<div class="u-handbar u-handbar2" id="u-handbar2-b"><div class="u-hand"></div></div>
		<div class="u-boxcon leftonce stop"><div class="u-box prewprinted"><div class="feednum feednum1"></div>
			<div class="feednum feednum2"></div>
			<div class="feednum feednum3"></div>
			<div class="feednum feednum4"></div>
			<div class="feednum feednum5"></div></div></div>
		<div class="u-fade" id="u-fade-b">
		<p class="u-spenum"></p>
			<div class="feednum feednum1"></div>
			<div class="feednum feednum2"></div>
			<div class="feednum feednum3"></div>
			<div class="feednum feednum4"></div>
			<div class="feednum feednum5"></div>
		</div>
		<div class="u-input"><p data-localize="feeder.input_si">进料</p></div>
		<div class="u-outtrack"></div>
		<div class="u-output u-outbox" id="u-outbox-b"></div>
		<div class="u-output"><p data-localize="feeder.output_si">出料</p></div>
	</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lastData = null,
	si = null;
var isanimated = true;
var url = getUrl("feeder");
var isFirst = true; 
var request = new GetRequest();
var showval= request.type;
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
if (request.line == "A") {
	$('.lineB').hide();
	$('.lineA').show();
}else if (request.line == "B") {
	$('.lineA').hide();
	$('.lineB').show();
}
websocket.onerror = function () {
    $('.u-boxcon').addClass('stop');
	$('.u-handbar1').addClass('stop');
    $('.u-box5').addClass('stop');
};

websocket.onopen = function (event) {
    $('.u-boxcon').removeClass('stop');
	$('.u-handbar1').removeClass('stop');
    $('.u-box5').removeClass('stop');
    console.log('ws open');
}
function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
                
                $('.u-box'+obj[i].stack_index).parent().addClass('moveleft');
                if (obj[i].stack_index == 1) {
                    $('.u-handbar2').addClass('growleft');
                }
            }

       })(i); 
    }
}
function addanimate(obj){
    for (var i = 0,len = obj.length; i < len; i++) {
       (function(i){
            if (obj[i].isPause == 0){
                $('.u-box'+obj[i].stack_index).parent().addClass('moveleft');
            }
            if (obj[i].stack_index == 3) {
            	switch (obj[i].isCache) 
				{ 
				  case 0:
				  	
				  	break; 
				  case 1:
				  	$('.u-handbar1').addClass('grow');
					$('.u-box3').addClass('moveup');
				  	break;
				  default:

				}
            }
       })(i); 
    }
}
websocket.onmessage = function (event) {
	si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    $('#u-boxe').addClass('moveleft');   
	if (isFirst) {
    	count(si.stack_list,0);
		isFirst = false;
    }
    addanimate(si.stack_list);
    cacheRender();
    errorRender();

	changeColor($('.t-status'),si.p2);
	changeColor($('.p5'),si.p5);
	changeColor($('.p6'),si.p6); 
	changeColor($('.p7'),si.p7);
	changeColor($('.p8'),si.p8);
	changeColor($('.p9'),si.p9);
	changeColor($('.p10'),si.p10);
	$('.u-spenum').html(si.box_surplus_qty);
	$('.cachenum').html(si.cache_list.length);
	drawCircle($('.u-cache'),si.cache_setting_qty,si.cache_current_qty);
    if (si.box_surplus_qty >0 && si.box_surplus_qty <20) {
    	$('.feednum').show();
    	$('.u-fade .feednum1,.u-fade .feednum2,.u-fade .feednum3,.u-fade .feednum4').hide();
    }else if (si.box_surplus_qty >20 && si.box_surplus_qty <40){
    	$('.feednum').show();
    	$('.u-fade .feednum1,.u-fade .feednum2,.u-fade .feednum3').hide();
    }else if (si.box_surplus_qty >40 && si.box_surplus_qty <60){
    	$('.feednum').show();
    	$('.u-fade .feednum1,.u-fade .feednum2').hide();
    }else if (si.box_surplus_qty >60 && si.box_surplus_qty <80){
    	$('.feednum').show();
    	$('.u-fade .feednum1').hide();
    }else if (si.box_surplus_qty >80 && si.box_surplus_qty <=100){
    	$('.feednum').show();
    }
    // if (si.box_surplus_qty == 0){
    // 	$('.feednum').show();
    // 	$('.u-fade .feednum1,.u-fade .feednum2,.u-fade .feednum3,.u-fade .feednum4,.u-fade .feednum5').hide();
    // 	$('.u-fade').addClass('moveupt');
    // 	$('.leftonce').addClass('moveleft');
    // 	$('.u-outbox').addClass('moveright');
    // }
    
    if (si.isChange == "1") {
    	$('.feednum').show();
    	$('.u-fade .feednum1,.u-fade .feednum2,.u-fade .feednum3,.u-fade .feednum4,.u-fade .feednum5').hide();
    	$('.u-fade').addClass('moveupt');
    	$('.leftonce').addClass('moveleft');
    	$('.u-outbox').addClass('moveright');
    }
    console.log(si);

  //   if (lastData && si.cache_list.length > lastData.cache_list.length) {
  //   	var index = si.cache_list.length - 1;
  //   	$('.u-handbar1').addClass('grow');
		// $('.u-box3').addClass('moveup');
		// if (index >= 0) {
		// 	$('.u-cachelist').append('<div class="u-cacheinfo">'+si.cache_list[index].silicon_id+'</div>');
		// }
		// if (si.cache_list.length >= si.cache_list.cache_setting_qty) {
		// 	$('.u-cachelist .u-cacheinfo:last-child').remove();
		// }
		
  //   }
    
    lastData = si;
}

document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
    $('.needleft').removeClass('moveleft');
    $('.leftonce').removeClass('moveleft');
    reset();
    count(si.stack_list,0);
}, false);
document.getElementById('u-box3').addEventListener("webkitAnimationIteration", function(){
    $('.u-box3').removeClass('moveup');
}, false);
document.getElementById('u-fade').addEventListener("webkitAnimationIteration", function(){
    $('.u-fade').removeClass('moveupt');
    $('.feednum').show();
}, false); 
document.getElementById('u-handbar1').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar1').removeClass('grow');
}, false);
document.getElementById('u-handbar2').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar2').removeClass('growleft');
}, false);
document.getElementById('u-outbox').addEventListener("webkitAnimationIteration", function(){
    $('.u-outbox').removeClass('moveright');
}, false);
document.getElementById('u-box3-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-box3').removeClass('moveup');
}, false);
document.getElementById('u-fade-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-fade').removeClass('moveupt');
    $('.feednum').show();
}, false); 
document.getElementById('u-handbar1-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar1').removeClass('grow');
}, false);
document.getElementById('u-handbar2-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar2').removeClass('growleft');
}, false);
document.getElementById('u-outbox-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-outbox').removeClass('moveright');
}, false); 
window.onbeforeunload = function(){
	websocket.close();
}  
</script>
</body>
</html>